<template>
	<z-nav-bar title="我的证书"></z-nav-bar>
	<view class="uni-white-bg" style="padding: 8rpx 32rpx ;">
		<view class="notification-bar flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/icon/icon_horn.png'" class="icon-size-32"></image>
			<view>上传证书像你的学员展示你的实力吧</view>
		</view>
		<view class="flex_sbc uni-mt-46">
			<view class="z-font-32 text-w">培训/资质证书上传</view>
			<view class="flex_cc button-upload" @click="openUploadPopup(0)">
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon-add-main.png'" class="icon-size-32"></image>
				<view>上传</view>
			</view>
		</view>
		<view v-if="data.cert && data.cert.length" class="flex_sbc flex_wrap">
			<view v-for="cert in data.cert" :key="cert.id" class="certification-box">
				<image :src="setting.oss_pub_domain + cert.url" class="img" mode="aspectFit"></image>
				<view class="bottom-box flex_sbc">
					<view>{{ cert.status == '2' ? '已认证' : '认证中...'}}</view>
					<view v-if="cert.status != '2'" class="reset-upload" @click="openUploadPopup(1, cert.id)">重新上传</view>
				</view>
			</view>
		</view>
		<z-no-data v-else placeholder="暂无证书" width="200"></z-no-data>
		<view class="flex_sbc uni-mt-46">
			<view class="z-font-32 text-w">比赛荣耀上传</view>
			<view class="flex_cc button-upload" @click="openUploadPopup(2)">
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon-add-main.png'" class="icon-size-32"></image>
				<view>上传</view>
			</view>
		</view>
		<view v-if="data.honour && data.honour" class="flex_sbc flex_wrap uni-mb-60">
			<view v-for="honour in data.honour" :key="honour.id" class="certification-box">
				<image :src="setting.oss_pub_domain + honour.url" class="img" mode="aspectFit"></image>
				<view class="bottom-box flex_sbc">
					<view>{{ honour.status == '2' ? '已认证' : '认证中...'}}</view>
					<view v-if="honour.status != '2'" class="reset-upload" @click="openUploadPopup(3, honour.id)">重新上传</view>
				</view>
			</view>
		</view>
		<z-no-data v-else placeholder="暂无证书" width="200"></z-no-data>
	</view>
	<selete-media ref="uploadImg" type="img" @done="uploadDone"></selete-media>
</template>

<script setup>
import { getCertList, submissionCertificate, modifyCertificate } from '@/api/my.js'
import { onShow } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance()
const data = reactive({
	cert: [],
	honour: []
})
fetchData()
function fetchData() {
	getCertList(1).then(res => {
		data.cert = res
	})
	getCertList(2).then(res => {
		data.honour = res
	})
}

const certType = ref(0), editId = ref(0)
function openUploadPopup(type, id) {
	// 0 新资质证书， 1 编辑资质证书， 2 新荣耀证书， 3 编辑荣耀证书
	certType.value = type
	editId.value = id || 0
	uploadImg.value.open()
}
const uploadImg = ref('')
function uploadDone(e) {
	const funName = [0, 2].includes(certType.value) ? submissionCertificate : modifyCertificate
	const postData = {}
	if ([0, 1].includes(certType.value)) {
		postData.certificate = e
	} else {
		postData.glory = e
	}
	funName([1, 3].includes(certType.value) ? e : postData, editId.value).then(res => {;
		fetchData()
	})
}

</script>

<style lang="scss">
	page {
		background: $uni-F5F5F5;
	}
</style>
<style lang="scss" scoped>
	@import 'certificate.scss'
</style>
